<template>
	<view class="schedule_content" >
		<scroll-view class="purchase-body" scroll-y="true" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper"
			show-scrollbar="false">
			<scroll-view class="tab" id="tab" :show-scrollbar="false" :scroll-x="true" :scroll-into-view="tabScrollInto">
				<view class="tabContent" style="display: flex; flex-direction: column;">
					<view style="display: flex;flex-direction: row;">
						<view class="tabItem" v-for="(tab,tabItemIndex) in tabList" :key="tabItemIndex" :id="tab.id"
							:data-id="tabItemIndex" :data-current="tabItemIndex" @click="pressScrollViewItem">
							<text class="tabItemTitle fonts16" :class="tabIndex==tabItemIndex ? 'tabItemTitleActive' : ''">{{tab.name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="schedule_main">
				<view class="" v-if="tabIndex==0">
					<view class="" v-for="item in data" style="margin-top: 10px;">
						<p class="fonts12 gray fontz" style="margin-bottom: 10px;text-align: center;">{{item.createTime}}</p>
						<view class="" @click="detail(item.recruitmentPositionVo)">
							<Inventory :data="item.recruitmentPositionVo" />
						</view>
					</view>
				</view>
				<view class="" v-else >
					<view class="" v-for="item in data" style="margin-top: 10px;">
						<p class="fonts12 gray fontz" style="margin-bottom: 10px;text-align: center;">{{item.createTime}}</p>
						<view class="" >
							<Schedule :data="item" :header="tabIndex" @scheduleClick="scheduleClick"/>
						</view>
					</view>
					
				</view>
				<view class="" v-if="data.length==0">
					<Kong />
				</view>
			</view>
			<view class="">
				<p class="more" v-if="onMore">没有更多了~</p>
				<p class="more" v-if="loading">加载中...</p>
			</view>
		</scroll-view>
		
		<!-- <view class="flex aic schedule_header">
				<p class="fontz fonts16 schedule_header_text" :class="item.id==HeadersValue?'color2':''"
					v-for="(item,index) in hearderData" :key="index">{{item.name}}</p>
		</view> -->
	</view>
</template>

<script>
	import {
		getlistRegistration,
		editRegistration,
		gettoudi
		
	} from "@/api/index"
	import Inventory from "../../components/Inventory.vue"
	import Schedule from "../../components/Schedule.vue"
	import Kong from "../../components/Kong.vue"
	export default {
		components:{
			Kong,
			Inventory,
			Schedule
		},
		data() {
			return {
				data:[],
				onMore: false,
				loading: false,
				totalBool: true,
				list_p: [],
				form: {
					pageNum: 1,
					pageSize: 10,
					statusGe:1,
					statusLe:2
				},
				tabIndex: 0,
				tabScrollInto: "",
				tabListSize: {},
				tabItemLineLeft: 0,
				tabItemLineWidth: 0,
				isPress: false,
				swiperHeight: 0,
				tabList: [{
						id:"tabItem0",
						name: "简历筛选",
						width:70,
						statusGe:1,
						statusLe:2
						
					},
					{
						id: "tabItem1",
						name: "笔试",
						width:70,
						statusGe:3,
						statusLe:3
					},
					{
						id:"tabItem2",
						name: "面试",
						width:70,
						statusGe:4,
						statusLe:4
					},
					{
						id: "tabItem3",
						name: "体检审查/录用",
						width:70,
						statusGe:5,
						statusLe:7
					},
					{
						id: "tabItem4",
						name: "待入职",
						width:70,
						statusGe:8,
						statusLe:8
					},
				]
			}
		},
		onLoad() {
			let system = uni.getSystemInfoSync();
			this.swiperHeight = system.windowHeight - 44;
			console.log(this.swiperHeight);
			this.gettoudiApi()
		},
		onShow() {
			this.getlistApi(this.form)
			
		},
		onPullDownRefresh() {
			this.form.pageNum = 1
			this.getlistApi(this.form)
		},
		onReady() {
			this.setTabItemDistance();
			this.setTabSelect(this.tabIndex);
		},
		methods: {
			scheduleClick(params){
				this.editRegistrationApi(params)
			},
			gettoudiApi(){
				gettoudi().then(res => {
					console.log("表头：",res);
					let obj=res.data
					this.tabList[0].name=this.tabList[0].name+`(${obj.department+obj.initialScreening})`
					this.tabList[1].name=this.tabList[1].name+`(${obj.writtenExamination})`
					this.tabList[2].name=this.tabList[2].name+`(${obj.interview})`
					this.tabList[3].name=this.tabList[3].name+`(${obj.medicalExaminationReview})`
					this.tabList[4].name=this.tabList[4].name+`(${obj.waitingForEntry})`
					
				})
			},
			editRegistrationApi(params) {
				editRegistration(params).then(res => {
					this.getlistApi(this.form)
					this.$message({
						message: `${res.msg}`,
						type: 'success',
						center: true,
						offset: 0.1
					});
				}).catch(res => {
					this.$message({
						message: `${res.msg}`,
						type: 'error',
						center: true,
						offset: 0.1
					});
				})
			},
			detail(item) {
				uni.navigateTo({
					url: "/pages/index/position/position?data=" + JSON.stringify(item)
				})
			},
			pressScrollViewItem(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.isPress = true;
				this.setTabSelect(index);
			},
			swiperChange(e) {
				let index = e.target.current || e.detail.current;
				this.tabIndex = index;
				console.log("投递进度",this.tabIndex);
				this.setTabSelect(this.tabIndex);
			},
			setTabItemDistance() {
				var queryTabSize = uni.createSelectorQuery().in(this);
				for (var i = 0; i < this.tabList.length; i++) {
					queryTabSize.select('#' + this.tabList[i].id).boundingClientRect();
				}
				queryTabSize.exec(rects => {
					rects.forEach((rect) => {
						this.tabListSize[rect.dataset.id] = rect;
					})
					// console.log(this.tabListSize);
					this.setTabItemLinePosition(this.tabListSize[this.tabIndex].left, this.tabListSize[this
							.tabIndex]
						.width);
				});
			
			},
			setTabItemLinePosition(left, width) {
				this.tabItemLineLeft = left;
				this.tabItemLineWidth = width;
			},
			swiperChangeEnd(e) {
				this.setTabItemLinePosition(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
			},
			setTabSelect(index) {
				this.tabIndex = index;
				this.tabScrollInto = this.tabList[index].id;
				this.form.statusGe=this.tabList[index].statusGe
				this.form.statusLe=this.tabList[index].statusLe
				console.log("参数：",this.tabScrollInto);
				this.form.pageNum=1
				this.getlistApi(this.form)
			},
			getlistApi(params) {
				this.loading = true
				getlistRegistration(params).then((res) => {
					this.loading = false
					console.log(res);
					if (this.form.pageNum == 1) {
						this.data = res.rows
					} else {
						this.data = [...this.data, ...res.rows]
					}
					console.log(this.data.length,res.total);
					if (this.data.length == res.total) {
						this.onMore = true
						this.totalBool=false
						setTimeout(()=>{
							this.onMore = false
						},2000)
					}else{
						this.totalBool=true
					}
					uni.stopPullDownRefresh()
				})
			},
			scrolltolower(event) {
				if (!this.totalBool) {
					this.onMore = true
					this.totalBool = false
					setTimeout(() => {
						this.onMore = false
					}, 2000)
					return
				}
				this.form_p.pageNum++;
				this.getlistApi(this.form)
			
			},
			
			scroll(e) {
				// 重新设置pulldown
				this.setPullDown(e.detail.scrollTop < 10)
			},
			
			scrolltoupper() {
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.purchase-list {
		background-color: #f5f5f5;
		height: calc(100vh - 88px);
		overflow: hidden;
		padding: 0 12px;
		.purchase-body {
			height: calc(100vh - 88px);
			overflow-y: auto;
	
			&::-webkit-scrollbar {
				display: none;
				/*隐藏滚动轴*/
			}
		}
	}
		.more {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 30px;
			width: 100%;
			font-size: 14px;
			color: #3D3D3D;
		}
	.schedule_main{
		padding: 0 12px 20px 12px;
		height: calc(100vh - 108px);
		overflow-y: auto;
	}
	.schedule_content {
		background: #F8F9FA;
		height: calc(100vh - 44px);

	}

	.schedule_header {
		width: calc(100% - 30px);
		padding: 0px 15px;
		height: 44px;
		background: #FFFFFF;
		overflow-x: scroll;
	}

	.schedule_header_text {
		width: 200px;
		margin-right: 30px;
	}

	.color2 {
		color: #2F6CBC;
	}

	.tab {
		/* #ifdef APP-PLUS */
		width: 100vw;
		/* #endif */
		height: 44px;
		display: flex;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	/* 隐藏滚动条 */

	.tab ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.tabLineView {
		position: relative;
		height: 2px;
		background-color: transparent;
	}

	.tabLine {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 0;
		background-color: #DD6161;
	}

	.tabLineActive {
		transition-duration: 0.3s;
		transition-property: left;
	}

	.childPageView {
		display: flex;
		flex-direction: column;
	}

	.tabItem {
		/* #ifndef APP-PLUS */
		/* display: inline-block; */
		/* #endif */
		width: calc(100% - 30px);
		padding: 0px 15px;
		display: flex;
		height: 44px;
		background: #FFFFFF;

		/* flex-wrap: nowrap; */

		/* 
		padding-left: 20px;
		padding-right: 20px; */

	}

	.tabItemTitle {
		color: #333333;
		font-size: 15px;
		height: 42px;
		line-height: 40px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		
	}

	.tabItemTitleActive {
		color:#2F6CBC;
		position: relative;
		&::after{
			position: absolute;
			bottom: 0;
			content: "";
			width: 20px;
			height: 2px;
			background: #2F6CBC;
			border-radius: 4px 4px 4px 4px;
		}
	}

	.childPageViewItem {
		flex: 1;
		flex-direction: column;
	}
</style>
